<template>
	<view>
			<view style="padding:0 20rpx;display: flex;
		align-items: center;justify-content: space-between;background: #fff;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;margin-bottom: 20px;height:90rpx;">
			<text>选择时间</text>
			<view >
				<u-datetime-picker
						:show="start_time_show"
						
						@cancel="startClose"
						@confirm="startConfirm"
						mode="datetime"
				></u-datetime-picker>
				<u-datetime-picker
						:show="end_time_show"
						@cancel="endClose"
						@confirm="endConfirm"
						
						mode="datetime"
				></u-datetime-picker>
				<text @click="start_time_show=true">{{start_time ? start_time : '开始时间'}}</text>-
				<text @click="end_time_show=true">{{end_time ? end_time : '结束时间'}}</text>
				<!-- <date-time @time1Confirm="time1Confirm" @time2Confirm="time2Confirm" :alarm_stat_start="alarm_stat_start" :alarm_stat_end="alarm_stat_end" /> -->
			</view>
		</view>
		
		
		<view class="" style="margin: 20rpx 20rpx;margin-bottom: 100rpx;padding-bottom:200rpx;">
			 <u-checkbox-group
				v-model="checkboxValue1"
				placement="column"
				@change="checkboxChange"
			>
			<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" v-for="(item,index) in list" :key="item.id">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<u-avatar :src="baseUrl + item.avatar"></u-avatar>
						<view style="display: flex;flex-direction: column;justify-content: center;margin-left:10rpx;">
							<text style="font-size: 17px;">{{item.username}}</text>
							<text>{{item.duty_start_time}}-{{item.duty_end_time}}</text>
						</view>
					</view>
					 <u-checkbox
						:disabled="item.duty_start_time&&item.duty_end_time"
						:label="' '"
						:name="item.id"
					>
					</u-checkbox>
				</view>
			</view>
			</u-checkbox-group>
		</view>
		<view class="" style="position: fixed;left: 0;bottom: 20rpx;width: 100%;">
			<view class="" style="margin: 0 20rpx;">
				<view  @click="submit" class="btn1">完成</view>
			</view>
			
		</view>


	</view>
</template>

<script>
	import TextShow from '@/components/text-show/text-show.vue'
	import DateTime from '@/components/date-time/date-time.vue'
	export default {
		comments:{
			TextShow,
			DateTime
		},
		data() {
			return {
				// setCalShow:false,
				minDate:'',
				// setDate:[],
				mode: 'range',
				search:{
					page:1,
					page_size:20,
					type:'day,month',
					date1:'',
					date2:'',
				},
				list:[],
				isLoading:false,
				alarm_stat_start:'',
				alarm_stat_end:'',
				checkboxValue1:[],
				start_time:'',
				end_time:'',
				start_time_show:false,
				end_time_show:false
				
				
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			startClose(){
				console.log(44);
				
				this.start_time_show = false
			},
			startConfirm(e){
				console.log(e);
				this.start_time = this.$u.timeFormat(e.value,'yyyy-mm-dd hh:MM:ss');
				console.log(this.start_time);
				this.start_time_show = false
			},
			endClose(){
				this.end_time_show = false
			},
			endConfirm(e){
				this.end_time = this.$u.timeFormat(e.value,'yyyy-mm-dd hh:MM:ss');
				this.end_time_show = false
			},
			submit(){
				if(!(this.checkboxValue1.length>0) || !(this.start_time && this.end_time)){
					return this.$u.toast('请选择时间或用户');
				}
				let data = {
					user_id:this.checkboxValue1,
					start_time:this.start_time,
					end_time:this.end_time,
					type:'2'
				}
				this.$api.common.setDuty(data).then(res => {
					console.log({res});
					this.$u.toast(res.msg);
					if(res.code == 1){
						setTimeout(() => {
							this.setCalClose();
						},300)
						
					}
					
				})

			},
			checkboxChange(e){
				console.log('checkboxValue1',e);
			},
			time1Confirm(time){
				this.alarm_stat_start = time
				if(this.alarm_stat_start && this.alarm_stat_end){
					this.setCalClose();
				}
			},
			time2Confirm(time){
				this.alarm_stat_end = time
				if(this.alarm_stat_start && this.alarm_stat_end){
					this.setCalClose();
				}
			},
			setCalClose(){
				// this.setCalShow = false
				this.search.page = 1;
				this.checkboxValue1 = []
				this.list = []
				this.getList()
			},

			getList(){
				this.isLoading = true; // 开始加载数据时设置标志位 
				// if(this.alarm_stat_start && this.alarm_stat_end){
				// 	this.search.date1 = this.alarm_stat_start;
				// 	this.search.date2 = this.alarm_stat_end;
				// }
				let data = {
					type:2,
				}
				
				this.$api.common.getDutyLog(data).then(res => {
					console.log({res});
					if(res.code == 1){
						this.list = this.list.concat(res.data);
						if(res.data.length == 0){
							this.$u.toast('没有数据了');
						}else{
							this.search.page += 1
						}
						this.isLoading = false;
						
					}
					
				})
			},
			onReachBottom() {  
			      // 滚动到底部时触发，如果不在加载中，则继续加载数据  
				  if(!this.isLoading){
					  this.getList()
				  }
				  
			},  
		}
	}
</script>

<style scoped>
page{
	background-color: #f2f2f2;
}
.btn1{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		/* border: 0.2rpx solid #000; */
		text-align: center;
		background: linear-gradient(80deg, #0068F0 0%, #0196FE 100%);
		color: #ffffff;
		font-family: "PingFang SC";
		font-style: normal;
		font-weight: 500;
		/* line-height: normal; */
	}
</style>
